<template>
  <uni-nav-bar title="我的收益" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" style="background:#1D8DFF;color:#fff">
    <view class="space-between">
      <view class="direction-start">
        <view>累计蓝宝石</view>
        <view style="margin-top:10rpx"><text style="font-size: 52rpx;">{{incomeAll.count}}</text></view>
      </view>
      <!-- <view class="but" @click="jump()">立即提现</view> -->
    </view>
<!--    <view class="space-between" style="margin-top:30rpx">
      <view>可提现：￥{{incomeAll.withdrawal}}</view>
      <view>冻结中：￥{{incomeAll.freeze}}</view>
    </view> -->
  </view>
  <view class="package">
    <!-- <view class="center">
      <view v-for="(item) in list" :key='item.name' style="margin-right: 40rpx;" class="column tab"
        @click="replace(item.type)">
        <text>{{item.name}}</text>
        <text :style="{background:active===item.type?'':'#fff'}"></text>
      </view>
    </view> -->
    <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
      :style="{ height: pageHeight + 'px' }">
      <view class="list" v-for="item in orderLists">
        <view class="space-between">
          <view>{{item.memo}}</view>
          <view style="font-size: 32rpx;">{{item.money}}</view>
        </view>
        <view class="space-between" style="color:#666;margin-top:10rpx;font-size: 28rpx;">
          <view>{{item.createtime}}</view>
          <view>蓝宝石：{{item.after}}</view>
        </view>
      </view>
      <view v-if="orderLists.length<1" class="column" :style="{ height: pageHeight + 'px' }">
        <image :src="Empty" style="width:352rpx;height: 352rpx;"></image>
        <text style="margin-top:20rpx;color:#666;">暂无好友</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { showLoading } from '@/utils/prompt';
  import { getBonusData, getBonusLog } from '@/gql/invitation';
  import { onShow } from '@dcloudio/uni-app';
  import { Empty } from '@/utils/Static';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  /**
   * 我的收益
   * @property {String} pageHeight 滑动高度
   * @property {Array} orderLists 明细列表
   * @property {Number} lastPage 总页数
   * @property {Number} currentPage 当前页数
   * @property {Object} incomeAll 资金信息
   * @property {Array} list 切换信息
   * @property {String} active 当前状态信息
   */
  // const list = [{ name: '可提现', type: 'withdrawal' }, { name: '冻结中', type: 'freeze' }]
  const active = ref('withdrawal')
  const incomeAll = ref({})
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref('')
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 180).toString();
    },
  });
  onShow(() => {
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getBonusData,
      variables: {
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getBonusData',
      payload,
      (obj : any) => {
        const { data } = obj;
        incomeAll.value = data.getBonusData
      }
    );
  }
  loadOn()
  /**
   * 明细列表
   * @property {Number} driver_id 用户ID
   * @property {Number} page 页数
   * @property {String} type 状态值
   */
  function loadOn() {
    showLoading()
    isLoading.value = true;
    const payload = {
      query: getBonusLog,
      variables: {
        page: currentPage.value,
        driver_id,
        type: active.value
      },
    };
    toPublish(
      'ql/driver/getBonusLog',
      payload,
      (obj : any) => {
        const { getBonusLog } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getBonusLog.list];
        lastPage.value = getBonusLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      loadOn();
    }
  }
  function replace(num : string) {
    active.value = num
    orderLists.value = []
    currentPage.value = 1
    loadOn()
  }
  function jump() {
    navTo('invitation/Withdrawal')
  }
</script>

<style scoped lang="less">
  .list:nth-last-of-type(1) {
    border-bottom: 0px;
    padding-bottom: 0px;
  }

  .list {
    padding: 20rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  .tab {
    text:nth-of-type(2) {
      width: 90rpx;
      height: 10rpx;
      background: #1D8DFF;
      opacity: 0.15;
      margin-top: -10rpx;
    }
  }

  .but {
    width: 180rpx;
    height: 68rpx;
    background: linear-gradient(180deg, #FF695E, #FF724E, #FF8F72);
    box-shadow: 0px 1px 16px 0px rgba(39, 65, 159, 0.64);
    border-radius: 34rpx;
    text-align: center;
    line-height: 68rpx;
  }
</style>